<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增用户</title>
    <!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="../html/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../html/js/jquery.js"></script>
</head>
<style>
    #img{
        position: relative; /* 添加这行，以便#imageFile相对于#img定位 */
        width: 50px;
        height: 50px;
        background-color: #adb5bd;
        text-align: center;
        line-height: 50px;
    }
    #imageFile{
        z-index: 10;
    }
    #images{
        z-index: 1;
    }
    #imageFile,#images{
        position: absolute; /* 修改为绝对定位 */
        opacity: 0; /* 保持透明 */
        width: 100%;
        height: 100%;
        top: 0;
        left: 0; /* 添加这行，确保元素从左上角开始定位 */
    }
</style>
<body>
<div class="container" style="margin: 0 auto;width: 600px;padding: 20px">
    <div class="row">
        <div class="col-md-6">
            <form id="fromData" method="post" enctype="multipart/form-data">
                <label for="imageFile">头像</label>
                <div class="form-group" id="img">
                    <label for="imageFile" style="font-size: 10px">点击上传</label>
                    <input type="file"class="form-control"  accept=".jpg, .jpeg, .png, .gif" placeholder="" name="imageFile" id="imageFile">
                    <img src="" id="images">
                </div>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" name="name" placeholder="用户名">
                    <small id="usernameHelp" class="form-text text-muted">用户名</small>
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="邮箱">
                    <small id="emailHelp" class="form-text text-muted">邮箱</small>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    <small id="passwordHelp" class="form-text text-muted">密码</small>
                </div>
                <div class="form-group">
                    <label for="gender">性别</label>
                    <select class="form-control" id="gender" name="gender">
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="birthday">出生日期</label>
                    <input type="date" class="form-control" id="birthday" name="birthday">
                </div>
                <p></p>
                <button type="button" onclick="toList()" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script>
    function toList() {
        let from = document.querySelector("#fromData")
        let fromData = new FormData(from)
        $.ajax({
            'url': 'http://localhost:8080/users',
            'type': 'post',
            'contentType': false,
            'processData': false,
            'data': fromData,
            'dataType': 'json',
            'success': toListSuccess
        })
    }
    function toListSuccess(data) {
        if (data.code === 200){
            alert("新增成功")
            window.location.href = "index.html"
        }else {
            alert("新增失败")
        }
    }

    // 图片选中
    $('#imageFile').on('change', function(event) {
        // event.target.files 获取到的是一个FileList对象，包含了用户选择的所有文件
        let files = event.target.files;
        if (files.length > 0) {
            // 只处理第一个被选中的文件
            let file = files[0];
            // 这里可以根据需要执行更多操作，比如预览图片、上传文件等
            let url = URL.createObjectURL(file)
            $('#images').attr("src",url)
            $('#images').css("opacity",100)
        }
    });

</script>